<template>
    <div>
        <el-card class="box-card" v-loading="loading">
            <div class="box-card-header">
                <el-button type="primary" @click="addHandler">新增</el-button>
                <el-tooltip effect="dark" content="刷新" placement="bottom" >
                    <el-icon class="box-item" @click="refreshHandler">
                        <Refresh />
                    </el-icon>
                </el-tooltip>
            </div>
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="title" label="公告标题" width="200" />
                <el-table-column prop="content" label="公告内容" width="300" />
                <el-table-column prop="update_time" label="发布时间" width="400" />
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button link type="primary" size="small"
                            @click="updataHandler(scope.$index, scope.row)">修改</el-button>
                        <el-popconfirm confirm-button-text="确认" cancel-button-text="不确认" title="你确定要删除这条数据?"
                            @confirm="removeHandler(scope.$index, scope.row)">
                            <template #reference>
                                <el-button link type="primary" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <div class="bottom">
            <el-pagination background layout="prev, pager, next" :total="total" :current-page="page"
                @current-change="getNotice" />
        </div>
        <updataDrawer :id="id" :title="title" :content="content" ref="upDrawer"></updataDrawer>
        <drawer ref="drawerRef" :width="500" :closeButton="true" :closeOnPress="true">
            <template #top>
                <h3>新增公告</h3>
            </template>
            <template #content>
                <el-form :model="form" label-width="120px" class="form-box">
                    <el-form-item label="标题">
                        <el-input v-model="form.title" placeholder="请输入公告标题" />
                    </el-form-item>
                    <el-form-item label="内容">
                        <el-input v-model="form.content" placeholder="请输入公告内容" />
                    </el-form-item>
                </el-form>
            </template>
            <template #bottom>
                <el-button type="primary" @click="submitHandler">添加</el-button>
                <el-button type="">取消</el-button>
            </template>
        </drawer>
    </div>
</template>
<script setup lang='ts'>
import { noticeListApi, removeNoticeApi, addNoticeApi } from '@/api/notice'
import { ref, reactive, onMounted } from 'vue'
import drawer from '@/components/drawer.vue'
import type { addNoticeForm } from '@/config/notice'
import { ElMessage } from 'element-plus'
import updataDrawer from './components/updataNotice.vue'
// 当前页数
const page = ref<number>(1)

// 总页数
const total = ref<number>(0)
const tableData = ref([])

// 修改抽屉
const drawer2 = ref(false)


// 获取抽屉节点
const drawerRef = ref()
// 获取抽屉2号节点
const upDrawer = ref()



const loading = ref(false)
// 新增内容信息
const form: addNoticeForm = reactive({
    title: '',
    content: ''
})
const addHandler = () => {
    drawerRef.value.kai()
}

// 修改公告
const id = ref()
const title = ref()
const content = ref()
const updataHandler = (ind: any, row: any) => {
    id.value = row.id
    title.value = row.title
    content.value = row.content
    upDrawer.value.openDrawer()
    
    
}

const getNotice = (p: any) => {
    if (typeof p === 'number') page.value = p
    loading.value = true
    noticeListApi(page.value).then(res => {
        total.value = res.data.data.totalCount
        tableData.value = res.data.data.list
        loading.value = false
    })
}
// 刷新按钮
const refreshHandler = () => getNotice(1)

// 添加公告
const submitHandler = () => {
    addNoticeApi(form.title, form.content).then(res => {
        if (res.data.msg === 'ok') {
            ElMessage({
                type: 'success',
                message: '添加成功'
            })
            drawerRef.value.guan()
            getNotice(page.value)
        }
    })
}
// 删除按钮
const removeHandler = (ind: any, row: any) => {
    removeNoticeApi(row.id).then(res => {
        console.log(res);
        if (res.data.data) {
            ElMessage({
                type: 'success',
                message: '删除成功'
            })
            getNotice(page.value)
        }
    })
}
onMounted(async () => {
    getNotice(page.value)
})

</script>
<style lang='scss' scoped>
.box-card {
    min-height: 500px;
}

.box-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 100px;

}

.bottom {
    width: 100%;
    height: 40px;
    background-color: rgba(99, 99, 99, .4);
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-item {
    cursor: pointer;
}

.form-box {
    width: 100%;
    padding-top: 200px;
}
</style>